<template>
  <el-container style="height: 100%; border: 1px solid #eee">
    <el-aside :width="widths" style="background-color: #545c64">
      <el-menu
        :collapse="isShow"
        :default-openeds="['1']"
        :default-active="locationUrl"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        :router="true"
        size=''
      >
      <div style="color:#fff;text-align: center;">
        <template v-if="widths == '202px' ">
            <i class="iconfont" style="font-size:34px"> &#xe6a9; 员工管理</i>
        </template>
        <template v-else-if="widths == '60px' ">
            <i class="iconfont" style="font-size:40px"> &#xe6a9; </i>
        </template>
      </div>
      
      </el-menu>
      <el-menu
      :collapse="isShow"
        :default-openeds="[0,1,2]"
        :default-active="locationUrl"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        :router="true"
      >
      <el-submenu :index="i" v-for="(v,i) in arr" :key='i' >
        <template #title><i class="iconfont"> &#xe619; </i>{{v.menuName}}</template>
        <el-menu-item-group>
          <el-menu-item :index="j.path" v-for="(j,k) in v.children" :key='k'>{{j.menuName}}</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
        <!-- <el-submenu index="3">
          <template #title><i class="iconfont"> &#xe65f; </i>考勤管理</template>
          <el-menu-item-group>
            <el-menu-item index="/checking">考勤管理</el-menu-item>
            <el-menu-item index="/mychecking">我的考勤</el-menu-item>
          </el-menu-item-group>
        </el-submenu> -->
      </el-menu>
    </el-aside>

    <el-container class="container">
      <el-header class="header">
        <div><i class="iconfont" style="color:skyblue" @click="iconFun1">&#xe723;</i></div>
        <div>
          <i class="iconfont" style="color:skyblue;margin-right:4px;" @click="screenFun">&#xe65b;</i>
          <span style="color:skyblue">{{name}}</span>
          <i class="iconfont" style="color:skyblue;margin-left:4px;" @click="outFun">&#xe65b;</i>
        </div>
        
      </el-header>

      <el-main style="background:d5d1d1">
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import {mapState} from 'vuex'
import screenfull from 'screenfull'
import {list} from '../api/Login/login'
export default {
  data() {
    return {
      isShow:false,
      widths:'202px',
      arr:[]
    }
  },
  created() {
    this.listFun()
  },
  methods: {
    listFun(){
      list().then((res)=>{
        if(res.status==200){
          this.arr=res.data
        }
      })
    },
    //全屏
    screenFun(){
      if (screenfull.isEnabled) {
        screenfull.request();
      }
    },
    outFun(){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: ''
        }).then(() => {
          localStorage.removeItem('token')
          if(localStorage.getItem('token')!=''){
            this.$router.push('/login')
          }
          this.$message({
            type: 'success',
            message: '退出成功!',
            duration:1000
          });

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
            duration:1000
          });
        });
    },
    iconFun1(){
      this.isShow=!this.isShow
      if (this.isShow) {
        this.widths = '60px'
      }else{
        this.widths = '202px'
      }
    }
  },
  computed:{
    ...mapState('modules',['name']),
  },
}
</script>

<style lang="scss">
html,
body,
#app,
.home {
  width: 100%;
  height: 100%;
}
*::-webkit-scrollbar {
  display: none;
  
}
.image {
  width: 100% !important;
}
.container{
  background-color: #ebebeb;
}
img {
  width: 100%;
}
.header{
  height: 50px;
  width: 100%;
  background: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  box-shadow: 4px 4px 4px #ccc;
}

</style>
